<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="formRules"
    :hideRequiredMark="title == '详情'"
  >
    <div class="form-content">
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <!-- 必填 -->
          <a-form-model-item label="沥青名称：" prop="lqType">
            <a-select
              placeholder="请选择沥青名称"
              v-model="form.lqType"
              @change="changeLqType"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in lqTypesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="沥青类别：" prop="asphaltNum">
            <a-select
              placeholder="请选择沥青类别"
              v-model="form.asphaltNum"
              @change="changeAsphaltNum"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in asphaltNumList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="沥青等级：" prop="asphaltLevel">
            <a-select
              placeholder="请选择沥青等级"
              v-model="form.asphaltLevel"
              @change="changeAsphaltLevel"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in asphaltLevelList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="气候分区：" prop="weatherRegion">
            <a-select
              placeholder="请选择气候分区"
              v-model="form.weatherRegion"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in weatherRegionList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="延度温度值：" prop="temperature">
            <a-select
              placeholder="请选择延度温度值"
              v-model="form.temperature"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in lqTemperaturesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="取样地点类型：">
            <a-select
              placeholder="请选择取样地点类型"
              v-model="form.samplingSpotType"
              allowClear
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in samplingSpotTypesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="施工桩号：">
            <a-input
              placeholder="请输入施工桩号"
              v-model="form.pileNo"
              :disabled="title == '详情'"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="左右幅：">
            <a-select
              allowClear
              placeholder="请选择左右幅"
              v-model="form.leftOrRight"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in leftOrRightsList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="面层：">
            <a-input
              placeholder="请输入面层"
              v-model="form.surface"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="供应商名称：">
            <a-select
              allowClear
              showSearch
              placeholder="请选择供应商名称"
              v-model="form.supplierName"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in supplierNamesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试验依据：">
            <a-input
              placeholder="请输入试验依据"
              v-model="form.trialBasis"
              :disabled="title == '详情'"
              :maxLength="100"
            />
          </a-form-model-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="沥青产地：">
            <a-input
              placeholder="请输入沥青产地"
              v-model="form.asphaltOrigin"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </a-form-model>
</template>
<script>
import { trialInfo, lqInfo } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["title", "trialNum"],
  watch: {
    trialNum: {
      handler(val) {
        if (val) {
          this.trialInfo();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        lqType: undefined, //沥青名称
        asphaltNum: undefined, //沥青类别
        asphaltLevel: undefined, //沥青等级
        weatherRegion: undefined, //气候分区
        temperature: undefined, //延度温度值
        samplingSpotType: undefined, //取样地点类型
        pileNo: "", //施工桩号
        leftOrRight: undefined, //左右幅
        surface: "", //面层
        supplierName: undefined, //供应商名称
        trialBasis: "", //试验依据
        asphaltOrigin: "", //沥青产地
      },
      formRules: {
        lqType: [
          {
            required: true,
            message: "请选择沥青名称",
            trigger: "change",
          },
        ],
        asphaltNum: [
          {
            required: true,
            message: "请选择沥青类别",
            trigger: "change",
          },
        ],
        asphaltLevel: [
          {
            required: true,
            message: "请选择沥青等级",
            trigger: "change",
          },
        ],
        weatherRegion: [
          {
            required: true,
            message: "请选择沥青类别",
            trigger: "change",
          },
        ],
        temperature: [
          {
            required: true,
            message: "请选择延度温度值",
            trigger: "change",
          },
        ],

        produceDate: [
          {
            required: true,
            message: "请选择制件日期",
            trigger: "change",
          },
        ],
        designStrength: [
          {
            required: true,
            message: "请选择设计强度",
            trigger: "change",
          },
        ],
        curingAge: [
          {
            required: true,
            message: "请选择养护龄期",
            trigger: "change",
          },
        ],
      },
      lqTypesList: [],
      asphaltNumList: [],
      asphaltLevelList: [],
      weatherRegionList: [],
      lqTemperaturesList: [],
      samplingSpotTypesList: [],
      leftOrRightsList: [],
      supplierNamesList: [],
    };
  },
  mounted() {
    this.form = {
      lqType: undefined, //沥青名称
      asphaltNum: undefined, //沥青类别
      asphaltLevel: undefined, //沥青等级
      weatherRegion: undefined, //气候分区
      temperature: undefined, //延度温度值
      samplingSpotType: undefined, //取样地点类型
      pileNo: "", //施工桩号
      leftOrRight: undefined, //左右幅
      surface: "", //面层
      supplierName: undefined, //供应商名称
      trialBasis: "", //试验依据
      asphaltOrigin: "", //沥青产地
    };
  },
  methods: {
    validateHandle() {
      let status = "";
      this.$refs["form"].validate((val) => {
        if (val) {
          status = true;
        } else {
          status = false;
        }
      });
      return status;
    },
    // 沥青等级切换，获取气候分区列表
    changeAsphaltLevel(value) {
      this.form.weatherRegion = undefined;
      this.lqInfo(3, this.form.lqType, this.form.asphaltNum, value);
    },
    // 沥青类别切换，获取沥青等级列表
    changeAsphaltNum(value) {
      this.form.asphaltLevel = undefined;
      this.form.weatherRegion = undefined;
      this.lqInfo(2, this.form.lqType, value);
    },
    // 沥青名称切换，获取沥青类别列表
    changeLqType(value) {
      this.form.asphaltNum = undefined;
      this.form.asphaltLevel = undefined;
      this.form.weatherRegion = undefined;
      this.lqInfo(1, value);
    },
    // 试验信息
    trialInfo() {
      trialInfo({
        trialNum: this.trialNum,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.lqTypesList = result.lqTypes || [];
          this.lqTemperaturesList = result.lqTemperatures || [];
          this.samplingSpotTypesList = result.samplingSpotTypes || [];
          this.leftOrRightsList = result.leftOrRights || [];
          this.supplierNamesList = result.supplierNames || [];
        })
        .catch((_) => {});
    },
    // 沥青信息
    lqInfo(type, lqType, asphaltNum, asphaltLevel) {
      lqInfo({
        trialNum: this.trialNum,
        lqType,
        asphaltNum,
        asphaltLevel,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          if (type == 1) {
            this.asphaltNumList = result || [];
          }
          if (type == 2) {
            this.asphaltLevelList = result || [];
          }
          if (type == 3) {
            this.weatherRegionList = result || [];
          }
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.form-content {
  padding: 0 120px 0 20px;
}
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 160px;
    min-width: 160px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
